<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../res/css/weui.css" />
    <link rel="stylesheet" href="../res/css/weuix.css" />
	<link rel="stylesheet" href="../res/css/common.css" />
    <title></title>
	<script src="../res/js/zepto.min.js"></script>
	<script src="../res/js/zepto.weui.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="../res/js/vue.min.js"></script>
	<script src="../res/js/common.js?v=1"></script>

    <style>
        body{
            height: 100%;
        }
        #app{
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-height: 100%;
        }
        .top-bar{
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            z-index: 9;
            height: 46px;
            box-shadow: 0 0 8px -4px #e0e0e0;
        }
        .sreach-list {
            display: flex;
        }
        .sreach-list > div {
            background-color: #ffffff;
            border-radius: 16px;
            flex: 1;
        }
        .sreach-btn {
            border:none;
            text-align: center;
            background: #1189FF;
            color: #FEFEFE;
            border-radius: 10px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            margin-left: 10px;
            padding: 5px 10px;
        }
        .weui-search-bar__box {
            padding-left: 10px;
            padding-right: 10px;
        }
        .change-project-tab {
            display: flex;
            margin: 10px;
        }
        .change-project-tab  div {
            margin-right: 24px;
        }
        .change-project-tab .tab-active {
            color: #03A6FF;
            font-weight: bold;
        }
        .no-data {
            margin-top: 100px;
            text-align: center;
            width: 100%;
            font-size: 18px;
        }

        .project-list {
            overflow-y: auto;
            padding: 10px 10px;
            margin: 10px;
            background: #ffffff;
            position: relative;
            border-radius: 10px;
        }
        .project-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #F1F1F3;
            position: relative;
        }
        .project-item:last-child {
            border-bottom: none;
        }
        .project-name {
            font-size: 18px;
            font-weight: 500;
        }
        .to-detail {
            color: #03A6FF;
            position: absolute;
            bottom: 15px;
            right: 0;
        }
    </style>
</head>
<body>
    <main id="app">
        <div class="weui-btn_primary weui-header top-bar">
            <div class="weui-header-left"><a class="icon icon-109" @click="pageBack"></a></div>
            <h1 class="weui-header-title">查询报告</h1>
        </div>
        <!-- 搜索框 -->
		<div class="weui-search-bar weui-search-bar_focusing" id="searchBar">
            <div class="sreach-list" style="display: flex;">
                <div class="weui-search-bar__box" style="margin-right: 10px;">
                    <input v-model="sreachParams.identy_id" class="weui-search-bar__input" id="searchInput" placeholder="请输入患者身份证号" required=""
                        type="search" autocomplete="off">
                </div>
                <div class="weui-search-bar__box">
                    <input v-model="sreachParams.user_name" class="weui-search-bar__input" id="searchInput" placeholder="请输入患者姓名" required=""
                        type="search" autocomplete="off">
                </div>
                <button class="sreach-btn" @click="sreach">查询</button>
            </div>
		</div>
        <div class="change-project-tab">
            <div v-for="(item, index) in tabList" :key="index" :class="{'tab-active': index + 1 === tabType}" @click="changeTab(index + 1)">{{item}}</div>
        </div>
        <div class="project-list" :style="{height: `${listHeight}px`}">
            <div class="no-data" v-if="list.length === 0">暂无数据</div>
            <div class="project-item" v-for="(item, index) in list" :key="index">
                <div class="project-name">{{tabType === 1 ? item.item_name : item.exam_item}}{{tabType === 2 ? `（检查类型：${item.exam_type}）` : ''}}</div>
                <div>检查日期：{{tabType === 2 ? item.exam_date : item.report_date}}</div>
                <div>患者：{{item.user_name}}</div>
                <div class="to-detail" @click="toDetail(item)">查看详情</div>
            </div>
        </div>
    </main>
</body>
<script>
new Vue({
    el: '#app',
    data: {
        list: [],
        tabType: 1,
        tabList: ['检验项目', '检查项目'],
        listHeight: 100,
        sreachParams: {
            identy_id: '',
            user_name: ''
        }
    },
    methods: {
        pageBack(){
            history.back()
        },
        changeTab(type) {
            console.log(type)
            this.tabType = type
            this.getList()
        },
        toDetail(item) {
            let paramsStr = ''
            // 检验项目
            if (this.tabType == 1) {
                let {archive_date, dev_code, inspec_no} = item
                paramsStr = `?archive_date=${archive_date}&dev_code=${dev_code}&inspec_no=${inspec_no}&identy_id=${this.sreachParams.identy_id}&type=2`
            } else {
                console.log()
                let {exam_no} = item
                paramsStr = `?exam_no=${exam_no}&identy_id=${this.sreachParams.identy_id}&type=1`
            }
            goPage(`inquiry_report_detail.htm${paramsStr}`)
        },
        sreach() {
            console.log(this.sreachParams)
            let {identy_id, user_name} = this.sreachParams
            if (!identy_id) {
                msgInfo('请先输入患者身份证');
                return
            }
            if (!user_name) {
                msgInfo('请先输入患者姓名');
                return
            }
            this.getList()
        },
        getList() {
            let api = this.tabType == 1 ? '/h5/sichuan/his/selectInspectReport' : '/h5/sichuan/his/selectReport'
            newAjaxPost(api, this.sreachParams, (res) => {
                this.list = res.data || []
            })
        }
    },
    mounted(){
        // 计算列表高度
        this.listHeight = window.innerHeight - 186
    }
})
</script>

</html>